<template>
	<div class="loginContainer" @keypress.enter="props.callBack">
		<StarBackground />
		<div class="myContainer">
			<div class="titleBox" :style='props.titleStyle'>
				<img src="../../../assets/logo.png" alt="logo" class='logo' />
				<!-- <div class='title'>{{title}}</div> -->
			</div>
			<slot></slot>
		</div>
		<div class='footer'>
			© 2024 石家庄佳诚网络技术有限公司版权所有 <span class='num' @click='footerClick'>冀ICP备12011972号-6</span>
		</div>
	</div>
</template>

<script setup>
	import {
		defineProps
	} from 'vue';
	import {
		useRouter,
		useRoute
	} from 'vue-router';
	import StarBackground from '@/components/StarBackground.vue'
	

	const router = useRouter()
	const props = defineProps({
		title: {
			type: null,
			default: null,
		},
		callBack:{
			type: Function,
		},
		titleStyle:{
					type:Object,
					defaule:{}
				}
	})

	function footerClick() {
		window.location.href = 'https://beian.miit.gov.cn/'
	}
</script>

<style lang="scss" scoped>
	@import '../../../styles/public.scss';

	.loginContainer {
		position: relative;
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
		width: 100vw;
		height: 100%;
		overflow: hidden;
	
		.myContainer {
			display: -webkit-box;
			display: -ms-flexbox; 
			display: -webkit-flex;
			display: flex;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			-ms-flex-direction: column;
			-webkit-flex-direction: column;
			flex-direction: column;
			padding: 40px 50px;
			
			box-shadow: 0px 20px 30px 0px #9465b717;
			border-radius: 16px;
			// align-content: center;
			// justify-content: center;
			background: white;
			.titleBox {
				display: -webkit-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;
				-webkit-box-align: center;
				-ms-flex-align: center;
				-webkit-align-items: center;
				align-items: center;
				-ms-flex-item-align: center;
				-webkit-align-self: center;
				align-self: center;
				margin: 0px 0 20px 0;

				.title {
					margin-left: 15px;
					font-size: 20px;
					font-weight: 500;
				}

				.logo {
					/* $logoWidth: 45px; */
					height: 70px;
					/* border-radius: 50%; */
				}
			}
		}

		.footer {
			width: 100%;
			height: 40px;
			display: -webkit-box;
			display: -ms-flexbox;
			display: -webkit-flex;
			display: flex;
			-webkit-box-align: center;
			-ms-flex-align: center;
			-webkit-align-items: center;
			align-items: center;
			-webkit-box-pack: center;
			-ms-flex-pack: center;
			-webkit-justify-content: center;
			justify-content: center;
			position: absolute;
			z-index: 1;
			bottom: 0;
			color: #a5a6a9;   
			font-size: 12px;

			.num {
				cursor: pointer;
				padding-left: 5px;
			}
		}
	}
</style>
